<template>
  <div class="body_analysis">
    <report-card :titleList="['base_1034', 'base_1036']" :pageNum="2">
      <div slot="firstPage" class="body">
        <div class="body_top justify-content-center">
          <p class="salt_ratio ratio_text">{{ bonePersent }}%</p>
          <p class="protein_ratio ratio_text">{{ proteinPersent }}%</p>
          <p class="fat_ratio ratio_text">{{ bodyfatPersent }}%</p>
          <p class="water_ratio ratio_text">{{ waterPersent }}%</p>
          <p class="body_top_info body_top_info_protein">{{ i18n.t('Protein') }}</p>
          <p class="body_top_info body_top_info_water">{{ i18n.t('Water') }}</p>
          <p class="body_top_info body_top_info_bone">{{ i18n.t('Bone') }}</p>
          <p class="body_top_info body_top_info_bodyfat">{{ i18n.t('Bodyfat') }}</p>
          <img :src="require(`@/assets/images/eight_electrodes_report/${imgChange}.png`)" class="body_top_img">
        </div>
        <my-bar-chart-for-body
          :measureData="measureData"
          v-if="measureData && weight_unit"
          :weight_unit="weight_unit"
          :config="config"
        />
      </div>
      <div slot="lastPage" class="nutrition">
        <div class="nutrition_table">
          <ul class="nutrition_table_content">
            <li class="content_item flex" v-for="item in pickReports" :key="item.id">
              <div class="content_item_name">{{ item.name}}</div>
              <div class="content_item_status align-items-center">
                <my-tag
                  v-for="(level, index) in item.levels"
                  :key="level.color"
                  :text="level.name"
                  :activeColor="level.color"
                  :selected="item.levelIndex === index"
                  class="content_item_status_order"
                  :class="{ content_item_status_order_first: level.name === 'base_1002' }"
                />
              </div>
            </li>
          </ul>
        </div>
        <p class="report_description">
          {{ i18n.t('base_1035') }}
        </p>
      </div>
    </report-card>
  </div>
</template>

<script lang="ts">
import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
import ReportCard from './reportCard/index.vue'
import MyTag from './MyTag.vue'
import MyBarChartForBody from './MyBarChartForBody.vue'
import { toFixedNumber } from '@/assets/ts/eight_electrodes_report/Util'
import getMeasureData, { consts } from '@yolanda-qn/eight-electrodes-report-lib'
import { TypedScaleData, TypedConfig } from '@yolanda-qn/eight-electrodes-report-lib/dist/types/src/typings'

@Component({ components: { ReportCard, MyTag, MyBarChartForBody } })
export default class extends Mixins() {
  @Prop() measureData!: TypedScaleData
  @Prop() weight_unit!: consts.WeightUnitEnum
  @Prop() config!: TypedConfig

  waterPersent: number = 0
  proteinPersent: number = 0
  bonePersent: number = 0
  bodyfatPersent: number = 0
  pickReports: Record<string, any>[] = []
  imgChange:string = ''  //男女图片切换
  @Watch('measureData')
  getMeasureData() {
    this.getReportDetail()
  }
  getReportDetail() {
    const ReportIdsMapping = consts.ReportBuilderIdsEnum
    const pickReports = getMeasureData(this.measureData,{
      ...this.config,
      builderIds:[
        ReportIdsMapping.ProteinMass,
        ReportIdsMapping.Bone,
        ReportIdsMapping.BodyfatMass,
        ReportIdsMapping.WaterMass,
      ]
    }).map(item => item.toObject())
    this.pickReports = pickReports
  }
  created() {
   
    this.getReportDetail()
    this.waterPersent = toFixedNumber(this.measureData.water, 1)
    this.proteinPersent = toFixedNumber(this.measureData.protein, 1)
    this.bodyfatPersent = toFixedNumber(this.measureData.bodyfat, 1)
    this.bonePersent = toFixedNumber(
      100 - this.waterPersent - this.proteinPersent - this.bodyfatPersent,
    )
    this.imgChange = this.measureData.gender === 0 ?'women_body_img':'man_body_img'
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/main.scss';
@import '../index.scss';
.body_analysis {
  .body {
    padding: rem(30) rem(24) rem(61) rem(24);
    .body_top {
      margin-top: rem(15);
      position: relative;
      .body_top_img {
        width: rem(322);
        height: rem(701);
        // object-fit: cover;
        // border: 1px solid red;
      }
      .ratio_text {
        position: absolute;
        left: 0;
        right: 0;
        top: rem(18);
        margin: auto;
        font-size: rem(28);
        color: #2a2e31;
        width: 100%;
        text-align: center;
      }
      .body_top_info {
        font-size: rem(24);
        color: #2a2e31;
        line-height: rem(33);
        position: absolute;
        &.body_top_info_protein {
          top: rem(139);
          right: rem(490);
        }
        &.body_top_info_water {
          top: rem(436);
          right: rem(490);
        }
        &.body_top_info_bone {
          top: rem(26);
          left: rem(490);
        }
        &.body_top_info_bodyfat {
          top: rem(245);
          left: rem(490);
        }
      }
      .protein_ratio {
        top: rem(133);
      }
      .fat_ratio {
        top: rem(240);
      }
      .water_ratio {
        top: rem(434);
      }
    }
  }
  .nutrition {
    padding: 0 rem(24);
    .nutrition_table {
      background: $primaryBg;
      padding: 0 rem(24);
      border: rem(2) solid $primaryBorder;
      .content_item {
        padding-top: rem(25);
        &:nth-child(n + 2) {
          border-top: rem(2) dashed $secondaryBorder;
        }
      }
      .content_item_name {
        width: rem(200);
        font-size: rem(28);
        color: #2a2e31;
        line-height: rem(40);
        margin-right: rem(16);
      }
    }
  }
}
.content_item_status_order {
  order: 2;
  margin: 0 0 rem(25) rem(15);
}
.content_item_status_order_first {
  order: 1;
}
.content_item_status {
  flex-wrap: wrap;
}
</style>
